<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
vue是依据 MVVM 模型思想 对js封装实现的js框架，
所以在vue使用时，应该限定vue模型实例能够影响的视图区域；
通常情况下会使用div标签指定一个区域；
然后就可以创建Vue实例，以及在实例内部创建和维护数据模型及其操作
从而控制视图
-->
<!--如，此处超出了app区域范围，那么就不会受到Vue数据模型的影响-->
{{message}}
<div id="app">
    <label>
        <!--使用v-model将视图与数据进行双向数据绑定，
        即模型中的数据发生了变化，那么变化会直接渲染到视图中，
        同时在视图中对数据进行修改，那么该数据修改会同步到模型的数据中，
        同时该行为又会影响到页面其他引用了该模型数据的视图-->
        <input type="text" v-model="message">
    </label><br/>
    {{message}}
</div>
</body>
<!--在引入外部js的script标签内部不能编写代码-->
<script src="js/vue.js"></script>
<!--在下方的script标签内部，保证上方外部js引入后在编写内容-->
<script>
    // Vue是整个Vue框架的类型，创建Vue实例对象，就表示创建一个模型
    new Vue({
        // 在{}内部可以对vue实例进行设置，
        // 如设置绑定的视图区域、数据模型、需要调用的方法等
        // el 视图挂载的位置指定，通常使用选择器进行指定
        el: '#app',
        // data 属性/选项，用于设置和维护整个Vue实例所需的数据模型
        data: {
            message: 'hello world!'
        }
    });
</script>
</html>